<template>
  <pro-layout :title="state.title" :locale="locale" v-bind="state.settings" v-model:openKeys="state.openKeys"
    v-model:collapsed="state.collapsed" v-model:selectedKeys="state.selectedKeys" :i18nRender="i18nRender">
    <template #rightContentRender>
      <right-content :top-menu="state.settings.layout === 'topmenu'" :is-mobile="state.isMobile"
        :theme="state.settings.navTheme" />
    </template>
    <template #menuFooterRender>
      <div style="color:red">menu footer</div>
    </template>
    <template #subMenuItemRender="{item}">
       <psp-sub-menu :menu-data="item" />
    </template>
    <router-view />
  </pro-layout>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import { i18nRender } from '@/locales'
import { getMenuData, clearMenuItem } from "@ant-design-vue/pro-layout";
import usePermissionStore from '@/store/static-router';
import { CONTENT_WIDTH_TYPE } from '@/store/mutation-types'
import defaultSettings from '@/config/defaultSettings'
import RightContent from '@/components/GlobalHeader/RightContent.vue';
import PspSubMenu from "@/components/PspSubMenu/PspSubMenu.vue";

const pstore = usePermissionStore();
const locale = (i18n: string) => i18n;


const { menuData } = getMenuData(clearMenuItem(pstore.addRouters));

const state = reactive({
  openKeys: ["/dashboard"],
  selectedKeys: ["/dashboard/workplace"],
  // preview.pro.antdv.com only use.
  isProPreviewSite: process.env.VUE_APP_PREVIEW === 'true' && process.env.NODE_ENV !== 'development',
  // end
  isDev: process.env.NODE_ENV === 'development' || process.env.VUE_APP_PREVIEW === 'true',

  // 侧栏收起状态
  collapsed: false,
  title: defaultSettings.title,
  settings: {
    // 布局类型
    layout: defaultSettings.layout, // 'sidemenu', 'topmenu'
    // CONTENT_WIDTH_TYPE
    contentWidth: defaultSettings.layout === 'sidemenu' ? CONTENT_WIDTH_TYPE.Fluid : defaultSettings.contentWidth,
    // 主题 'dark' | 'light'
    navTheme: defaultSettings.navTheme,
    // 主色调
    primaryColor: defaultSettings.primaryColor,
    fixedHeader: defaultSettings.fixedHeader,
    fixSiderbar: defaultSettings.fixSiderbar,
    colorWeak: defaultSettings.colorWeak,
    menuData,
    hideHintAlert: false,
    hideCopyButton: false
  },
  // 媒体查询
  query: {},

  // 是否手机模式
  isMobile: false

});

</script>
<style lang="less">
@import "./BasicLayout.less";
</style>